<template>
  <div class="from-data">
    <div class="header-top" v-if="$attrs.title">
       <h4  class="title">{{$attrs.title}}</h4>
       <span style="margin-left:10px">
           <slot name="btn"></slot>
       </span>
    </div>

    <el-form :model="form" :inline="inline" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm">
      <el-row v-for="(item, index) in options" :key="index" :class="{'form-item-inline':inline}" >
        <div v-for="(formItem,itemIndex) in item" :key="itemIndex">
         <slot :name="formItem.slotName" v-if="formItem.slotName"></slot>
         <el-form-item  v-else :label="formItem.label" :prop="formItem.field?formItem.field:''" :key="formItem.field">
            <el-input v-if="formItem.type=='input'"
             v-bind="formItem.props"
             :style="{'width':formItem.props&&formItem.props.width?formItem.props.width:'220px'}"
             :placeholder="formItem.placeholder?formItem.placeholder:'请输入'"
             :clearable="true"
             @keyup.enter.native="entrance"
             v-model="form[formItem.field]"></el-input>
             <SelectEnum v-else-if="formItem.type=='select'" :enums="formItem.enums" v-bind="$attrs" type="select" v-model="form[formItem.field]"></SelectEnum>
              <SelectEnum v-else-if="formItem.type=='radio'" :enums="formItem.enums" v-bind="$attrs" type="radio" v-model="form[formItem.field]"></SelectEnum>
               <SelectEnum v-else-if="formItem.type=='checkbox'" :enums="formItem.enums" v-bind="$attrs" type="checkbox" v-model="form[formItem.field]"></SelectEnum>

          </el-form-item>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import SelectEnum from '@/components/SelectEnum/SelectEnum.vue'

export default {
  components: {
    SelectEnum
  },
  props: {
    // 数据对象
    form: {
      type: Object

    },
    // 表单配置项
    options: {
      type: Array
    },
    // 表单样式排列
    inline: {
      type: Boolean,
      default: true
    },
    // label样式
    labelWidth: {
      type: String,
      default: '110px'
    }
  },
  data() {
    return {
      rules: {}

    }
  },
  created() {
    this.initFormParams()
  },
  methods: {
    // 初始化配置项
    initFormParams() {
      for (const item of this.options) {
        for (const col of item) {
          if (col.rules && col.rules.length > 0) {
            this.rules[col.field] = col.rules
          }
        }
      }
    },
    // 表单校验的方法
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log('success submit!!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    entrance() {
      this.$emit('entranceSearch')
    }
  }

}
</script>

<style lang="scss" scoped>
/deep/.el-input__inner{
  width: 100%;
}
.form-item-inline{
  display: flex;
}
.title{
  padding-left: 20px;
}
.header-top{
  display: flex;
  align-items: center;
}
</style>
